<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="/WEB-INF/template/basicTemplate.xhtml">
	<ui:define name="content">
		<h:inputHidden rendered="#{menuController.userRank != 1}" value="#{menuController.redirect()}"></h:inputHidden>
		<h:inputHidden value="#{menuController.setUrl(request.requestURL)}"></h:inputHidden>
		<h:inputHidden rendered="#{menuController.userRank == 1}">
		<body>
		<f:view>
			<h:form id="form">
				<br />
				<h:panelGrid border="1" columns="1" styleClass="templatetable">
					<f:facet name="header">
						<h:outputText value="CREATE TEMPLATE" />
					</f:facet>
					<h:panelGrid border="0" columns="2"
						styleClass="inner-table equalsColumns">
						<h:outputText styleClass="boldText" value="Title : "></h:outputText>
						<h:panelGroup>
							<h:inputText id="title" value="#{templateDTO.title}"
								styleClass="inputText" required="true"
								requiredMessage="  Title field must not be empty!">
							</h:inputText>
							<h:message for="title" styleClass="error" />
						</h:panelGroup>
						<h:outputText styleClass="boldText" value="Time (min): "></h:outputText>
						<h:panelGroup>
							<h:inputText id="duration" value="#{templateDTO.duration}"
								styleClass="inputText" required="true"
								requiredMessage="  Test time must be greater than 0!"
								validatorMessage="  Time must be a number > 0!">
								<f:validateLongRange minimum="1" />
							</h:inputText>
							<h:message for="duration" styleClass="error" />
						</h:panelGroup>
						<h:outputText styleClass="boldText"
							value="Select question domain: "></h:outputText>

						<h:selectOneListbox styleClass="droplist dropListTemplate"
							id="domainListBox" size="1"
							value="#{templateController.selectedDomain}"
							style="width: 157px; "
							disabled="#{templateController.domainList}">
							<f:selectItems value="#{templateController.domains}" var="item"
								itemLabel="#{item.name}" itemValue="#{item.name}" />
							<f:ajax execute="questionsPerCateg categoriesListBox "
								listener="#{templateController.populateCategories}"
								render="categoriesListBox questionsPerCateg" />
						</h:selectOneListbox>
						<h:outputText styleClass="boldText" value="Choose category: " />
						<h:selectOneListbox styleClass="droplist dropListTemplate"
							size="1" id="categoriesListBox"
							value="#{templateController.selectedCategory}"
							style="width: 157px; "
							disabled="#{templateController.categoryList}">
							<f:selectItems value="#{templateController.categories}"
								var="item" itemLabel="#{item.name}" itemValue="#{item.name}" />
							<f:ajax execute="@this"
								listener="#{templateController.updateQuestionsPerCateg}"
								render="questionsPerCateg" />
						</h:selectOneListbox>
						<h:panelGroup>
							<h:outputText styleClass="boldText"
								value="Number of questions for current category (" />
							<h:outputText styleClass="boldText" id="questionsPerCateg"
								value="#{templateController.questionsPerCategory} available):" />

						</h:panelGroup>
						<h:panelGroup>
							<h:inputText styleClass="inputText"
								value="#{templateController.selectedQuestionNumber}">
							</h:inputText>
							<h:outputText value="#{templateController.errorMessage}"
								styleClass="error" />
							<h3><h:outputText
								value="#{templateController.successMessage}" /></h3>
						</h:panelGroup>
					</h:panelGrid>
					<h:panelGrid columns="1" styleClass="inner-table butright">
						<h:panelGroup>
							<h:commandButton id="addCategories" value="+ Add category"
								action="#{templateController.addSelectedCategories}"
								styleClass="button" disabled="#{templateController.addButton}">
								<f:ajax event="action" execute="@form" render="@form" />
							</h:commandButton>
							<h:commandButton action="#{templateController.add}"
								value="Save template" styleClass="button" />
							<h:commandButton action="#{templateController.initDomains}"
								value="Cancel" styleClass="button" 
								onclick="if (!confirm('Any information entered will not be saved. \nAre you sure you want to cancel?')) return false;"/>
						</h:panelGroup>
					</h:panelGrid>
					<h:dataTable id="table" rendered="#{templateController.visible}"
						value="#{templateDTO.templateCategories}" var="c"
						styleClass="order-table" headerClass="order-table-header"
						rowClasses="order-table-odd-row,order-table-even-row" width="100%">
						<h:column headerClass="catHeader">
							<f:facet name="header">Category name:</f:facet>
    						#{c.category.name}     
    					</h:column>
						<h:column>
							<f:facet name="header">Questions per category:</f:facet>
    						#{c.numberOfQuestions}
    					</h:column>
						<h:column headerClass="delHeader">
							<f:facet name="header">Delete</f:facet>
							<h:commandButton value="Delete" styleClass="button"
								action="#{templateController.delete(c.category.id)}"
								onclick="if (!confirm('Are you sure you want to continue?')) return false;">
							</h:commandButton>
						</h:column>
					</h:dataTable>
				</h:panelGrid>
			</h:form>
		</f:view>
		</body>
		</h:inputHidden>
	</ui:define>
</ui:composition>
</html>